<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <!--

      rules：表单验证规则

  -->

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <!--

          prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的

        -->

        <el-form-item label="活动名称" prop="name">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

        <el-form-item label="活动区域" prop="region">

            <el-select v-model="form.region" placeholder="请选择活动区域">

                <el-option label="区域一" value="shanghai"></el-option>

                <el-option label="区域二" value="beijing"></el-option>

            </el-select>

        </el-form-item>

        <el-form-item label="活动时间">

            <el-col :span="11">

                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>

            </el-col>

            <el-col class="line" :span="1">-</el-col>

            <el-col :span="11">

                <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>

            </el-col>

        </el-form-item>

        <el-form-item label="即时配送">

            <el-switch v-model="form.delivery"></el-switch>

        </el-form-item>

        <el-form-item label="活动性质">

            <el-checkbox-group v-model="form.type">

                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>

                <el-checkbox label="地推活动" name="type"></el-checkbox>

                <el-checkbox label="线下主题活动" name="type"></el-checkbox>

                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>

            </el-checkbox-group>

        </el-form-item>

        <el-form-item label="特殊资源">

            <el-radio-group v-model="form.resource">

                <el-radio label="线上品牌商赞助"></el-radio>

                <el-radio label="线下场地免费"></el-radio>

            </el-radio-group>

        </el-form-item>

        <el-form-item label="活动形式">

            <el-input type="textarea" v-model="form.desc"></el-input>

        </el-form-item>

        <el-form-item>

            <el-button type="primary" @click="onSubmit">立即创建</el-button>

        </el-form-item>

    </el-form>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

            form: {

                name: '',

                region: '',

                date1: '',

                date2: '',

                delivery: false,

                type: [],

                resource: '',

                desc: ''

            },

            //定义校验规则

            rules: {

                name: [

                    { required: true, message: '请输入活动名称', trigger: 'blur' },

                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }

                ],

                region: [

                    { required: true, message: '请选择活动区域', trigger: 'change' }

                ]

            }

        },


        methods:{

            onSubmit() {
                //输入校验
                console.log(this.form);

                //validate：对整个表单进行校验的方法，参数为一个回调函数。

                //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。

                //箭头函数 HTML ES6（参数列表）=>{函数体}

                this.$refs['form'].validate((valid) => {

                    if (valid) {

                        alert('submit!');

                    } else {

                        console.log('error submit!!');

                        return false;

                    }

                });

            }

        }
    })
</script>
</html>